<html>
    <head>
        <title>Itowns - 6 planes on a cube</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv"></div>
        <script src="../dist/itowns.js"></script>
        <script src="js/GUI/LoadingScreen.js"></script>
        <script type="text/javascript">
            window.THREE = itowns.THREE;
        </script>
        <script src="https://unpkg.com/three@0.86.0/examples/js/controls/OrbitControls.js"></script>
        <script type="text/javascript">
            // Define projection that we will use (taken from https://epsg.io/3946, Proj4js section)
            itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
            // # Planar (EPSG:3946) viewer

            var extent;
            var viewerDiv;
            var view;
            var controls;
            var scale;
            var parent;
            var index;
            var wms;
            var obj;
            var offset;
            var tileLayer;
            var config;

            var wmsLayers = [
                'fpc_fond_plan_communaut.fpcilot',
                'pvo_patrimoine_voirie.pvochausseetrottoir',
                'Ortho2009_vue_ensemble_16cm_CC46',
                'pos_opposable.poshauvoi',
                'MNT2015_Ombrage_2m',
                'cad_cadastre.cadilot',
            ];

            var cubeTransformations = [
                {
                    position: new itowns.THREE.Vector3(0, 0, 0.5),
                    rotation: new itowns.THREE.Euler(),
                },
                {
                    position: new itowns.THREE.Vector3(0, 0, -0.5),
                    rotation: new itowns.THREE.Euler().set(Math.PI, 0, 0),
                },
                {
                    position: new itowns.THREE.Vector3(0, 0.5, 0),
                    rotation: new itowns.THREE.Euler().set(-Math.PI * 0.5, 0, 0),
                },
                {
                    position: new itowns.THREE.Vector3(0, -0.5, 0),
                    rotation: new itowns.THREE.Euler().set(Math.PI * 0.5, 0, 0),
                },
                {
                    position: new itowns.THREE.Vector3(0.5, 0, 0),
                    rotation: new itowns.THREE.Euler().set(0, Math.PI * 0.5, 0),
                },
                {
                    position: new itowns.THREE.Vector3(-0.5, 0, 0),
                    rotation: new itowns.THREE.Euler().set(0, -Math.PI * 0.5, 0),
                },
            ];

            // Define geographic extent: CRS, min/max X, min/max Y
            extent = new itowns.Extent(
                'EPSG:3946',
                1837900, 1837900 + 8000,
                5170100, 5170100 + 8000);

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            viewerDiv = document.getElementById('viewerDiv');

            itowns.THREE.Object3D.DefaultUp.set(0, 0, 1);

            scale = new itowns.THREE.Vector3(1, 1, 1).divideScalar(extent.dimensions().x);

            // Instanciate View
            view = new itowns.View(extent.crs, viewerDiv);
            setupLoadingScreen(viewerDiv, view);

            view.mainLoop.gfxEngine.renderer.setClearColor(0x999999);

            parent = new itowns.THREE.Mesh(
                new itowns.THREE.BoxGeometry(8000, 8000, 8000),
                new itowns.THREE.MeshBasicMaterial({ color: 0xdddddd }));
            parent.scale.copy(scale);
            parent.updateMatrixWorld(true);

            view.scene.add(parent);

            for (index = 0; index < wmsLayers.length; index++) {
                wms = wmsLayers[index];
                obj = new itowns.THREE.Object3D();
                offset = extent.center().toVector3().negate().applyEuler(cubeTransformations[index].rotation);
                offset.add(cubeTransformations[index].position.divide(scale));
                obj.position.copy(offset);
                obj.rotation.copy(cubeTransformations[index].rotation);
                parent.add(obj);
                obj.updateMatrixWorld(true);

                tileLayer = new itowns.PlanarLayer('planar' + wms + index,
                    extent, obj, { disableSkirt: true });

                view.addLayer(tileLayer);

                var colorSource = new itowns.WMSSource({
                    url: 'https://download.data.grandlyon.com/wms/grandlyon',
                    version: '1.3.0',
                    name: wms,
                    projection: 'EPSG:3946',
                    format: 'image/jpeg',
                    extent,
                });
                var colorLayer = new itowns.ColorLayer('wms_imagery' + wms + index, {
                    source: colorSource,
                });
                view.addLayer(colorLayer, tileLayer);

                var elevationSource = new itowns.WMSSource({
                    extent,
                    version: '1.3.0',
                    name: 'MNT2012_Altitude_10m_CC46',
                    projection: 'EPSG:3946',
                    width: 256,
                    format: 'image/jpeg',
                    url: 'https://download.data.grandlyon.com/wms/grandlyon',
                });
                var elevationLayer = new itowns.ElevationLayer('wms_elevation' + wms + index, {
                    source: elevationSource,
                    useColorTextureElevation: true,
                    colorTextureElevationMinZ: 37,
                    colorTextureElevationMaxZ: 240,
                });
                view.addLayer(elevationLayer, tileLayer);
            }

            // Since PlanarView doesn't create default controls, we manipulate directly three.js camera
            // Position the camera at south-west corner
            view.camera.camera3D.position.set(3, 2, 3);
            view.camera.camera3D.updateMatrixWorld(true);
            view.camera.camera3D.lookAt(new itowns.THREE.Vector3(0, 0, 0));

            controls = new itowns.THREE.OrbitControls(view.camera.camera3D, viewerDiv);
            controls.minDistance = 1;
            controls.addEventListener('change', function _() { view.notifyChange(view.camera.camera3D); });

            // Request redraw
            view.notifyChange();
        </script>
    </body>
</html>
